<template>
  <div class="main">
    <div class="login_from">
      <h2>我的管理系统</h2>
      <el-form ref="loginFormRef" style="max-width: 600px" :model="loginForm" status-icon :rules="loginRules"
        label-width="auto" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router"
import axios from "axios"
import { useStore } from "vuex";

const loginFormRef = ref()
const router = useRouter()
const store = useStore()

const loginForm = reactive({
  username: "",
  password: ""
})

const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      // localStorage.setItem("token","xiaoli")
      axios.post("/api/admin/user/login", loginForm).then(res => {
        let userInfo = res.data.data
        // console.log(userInfo);
        store.commit("changeUserInfo",userInfo)
        ElMessage({
          type: res.data.code == 200 ? 'success' : 'warning',
          message: res.data.message,
        })
        if(res.data.code == 200)router.push("/home")
      })
    } else {
      ElMessage({
        type: 'warning',
        message: "请输入用户名或密码",
      })
    }
  })
}

const loginRules = reactive({
  username: [{
    required: true,
    message: "请输入用户名",
    trigger: blur
  }],
  password: [{
    required: true,
    message: "请输入密码",
    trigger: blur
  }]
});
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: rgb(44, 58, 74);
}

h2 {
  margin-bottom: 30px;
  color: white;
}

.login_from {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba($color: #000000, $alpha: 0.3);
  // color: white;
  text-align: center;
  padding: 20px 50px;
}

::v-deep .el-form-item__label {
  color: white;
}
</style>
